<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>生命周期新</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
    <script type="text/babel">
        class Count extends React.Component {
            initState = () => {
                console.log("初始化字段")
                return 0;
            }
            state = {
                count: this.initState()
            }
            constructor(props) {
                super(props)
                console.log("Count--constructor")
            }
            //static  从Props得到一个派生的状态
            static getDerivedStateFromProps(props,state){
                console.log("Count--getDrivedStateFromProps",props,state)
                // return props
                return null
            }
            render() {
                console.log("Count--render")
                return (
                    <div >
                        count:{this.state.count}
                        <br />
                        <button onClick={this.add}>点击+1</button>
                        <button onClick={this.force}>不修改State强制更新</button>
                    </div>
                )
            }
            componentDidMount(){
                console.log("Count--componentDidMount")
            }
            add = () => {
                console.log("Count--调用setState")
                let { count } = this.state
                this.setState({ count: count + 1 })
            }
            force=()=>{
                this.forceUpdate()
            }
            forceUpdate(){
                console.log("Count--forceUpdate")
            }
            shouldComponentUpdate(){
                console.log("Count--shouldComponentUpdate")
                return true
            }
            //更新之前获取快照
            getSnapshotBeforeUpdate(){
                console.log("Count--getSnapshotBeforeUpdate")
                return "getSnapshotBeforeUpdate"
            }
            //第三个参数为 getSnapshotBeforeUpdate 的返回值
            componentDidUpdate(preProps,preState,shapshotValue){
                console.log("Count--componentDidUpdate",preProps,preState,shapshotValue)
            }
        }
        ReactDOM.render(<Count count="199" name={111}/>, document.getElementById('test'))
    </script>
</body>
</html>